<template>
    <div id="centertop" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from "echarts";
import china from '@/assets/china.json'; // 确保这个路径是正确的
//import china from '@/assets/中华人民共和国.json'; // 确保这个路径是正确的

export default {
    name: 'ChinaMap',
    data() {
        return {
            dataList: [], // 这里将初始化为空，稍后会填充数据
            myChart: null, // ECharts 实例
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    methods: {
        initChart() {
            // 初始化 ECharts 实例
            let myChart = echarts.init(document.getElementById('centertop'));
            // 填充数据
            this.dataList = 
                [
                    {
                        "name": "河南",
                        "value": 38
                    },
                    {
                        "name": "山东",
                        "value": 18
                    },
                    {
                        "name": "陕西",
                        "value": 248
                    },
                    {
                        "name": "重庆",
                        "value": 477
                    },
                    {
                        "name": "甘肃",
                        "value": 107
                    },
                    {
                        "name": "四川",
                        "value": 448
                    },
                    {
                        "name": "湖南",
                        "value": 91
                    },
                    {
                        "name": "湖北",
                        "value": 58
                    },
                    {
                        "name": "河北",
                        "value": 0
                    },
                    {
                        "name": "山西",
                        "value": 0
                    },
                    {
                        "name": "辽宁",
                        "value": 0
                    },
                    {
                        "name": "吉林",
                        "value": 0
                    },
                    {
                        "name": "黑龙江",
                        "value": 0
                    },
                    {
                        "name": "江苏",
                        "value": 0
                    },
                    {
                        "name": "浙江",
                        "value": 0
                    },
                    {
                        "name": "安徽",
                        "value": 0
                    },
                    {
                        "name": "福建",
                        "value": 0
                    },
                    {
                        "name": "江西",
                        "value": 0
                    },
                    {
                        "name": "广东",
                        "value": 0
                    },
                    {
                        "name": "海南",
                        "value": 0
                    },
                    {
                        "name": "贵州",
                        "value": 0
                    },
                    {
                        "name": "云南",
                        "value": 0
                    },
                    {
                        "name": "青海",
                        "value": 0
                    },
                    {
                        "name": "台湾",
                        "value": 0
                    },
                    {
                        "name": "内蒙古",
                        "value": 0
                    },
                    {
                        "name": "广西",
                        "value": 0
                    },
                    {
                        "name": "西藏",
                        "value": 0
                    },
                    {
                        "name": "宁夏",
                        "value": 0
                    },
                    {
                        "name": "新疆",
                        "value": 0
                    },
                    {
                        "name": "北京",
                        "value": 0
                    },
                    {
                        "name": "上海",
                        "value": 0
                    },
                    {
                        "name": "天津",
                        "value": 0
                    },
                    {
                        "name": "香港",
                        "value": 0
                    },
                    {
                        "name": "澳门",
                        "value": 0
                    }
                ];

            let option = {
                // title: {
                //     text: '杜甫诗词分布地区图',
                //     subtext:"数据来源-古诗文网",
                //     left: '10%',
                //     top: '5%',
                //     textStyle: {
                //         fontSize: 20,
                //         fontWeight: 'bold',
                //         color: '#333'
                //     }
                // },
                tooltip: {//悬停时的提示框
                    show:true,
                    trigger: 'item',
                    padding:10,
                    borderWidth: 1,
                    borderColor: '#409eff',
                    backgroundColor: 'rgb(252, 239, 232)',
                    textStyle: {
                        color: '#000000',
                        fontSize: 12
                    },
                    formatter: '{b}<br/>诗人在此作的古诗数目为：{c}'
                },
                visualMap: {//视觉映射组件
                    show: true,
                    right: 20,
                    top: '30%',
                    left: '85%',
                    min: 0,
                    max: 500,
                    text: ['高', '低'],
                    calculable: true,  // 启用拖动手柄来选择数据范围
                    showLabel: true,
                    realtime: true,
                    align: 'left',
                    inRange: {
        color: ['#E0EEE8','#88AD9C','#549688','#3DE1AD'] // 深蓝到黑色渐变
    }
                    
                },
                series: [//地图系列
                    {
                        name: '中国地图',
                        type: 'map',
                        //top:80,
                        map: 'china',
                        roam: true,
                        label: {
                            show: false,
                            formatter: '{b}'
                        },
                        itemStyle: {
                            //borderColor: '#fff',
                            borderWidth: 0.8,
                            areaColor: '#177cb0',
                            shadowBlur: 10, // 添加阴影效果
                            shadowColor: 'rgba(0, 0, 0.5, 0.2)',
                           
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                                fontWeight: 'bold'
                            },
                        },
                        data: this.dataList // 使用数据列表
                    }
                ]
            };

            // 注册地图并设置选项
            echarts.registerMap('china', china);
            myChart.setOption(option);
            //dispatch分派一个action selectProvince
            //params 是传递给回调函数的参数，包含了点击事件的详细信息。
            myChart.on('click', (params) => {
                this.$store.dispatch('selectProvince', params.name);
            });

            // 监听窗口大小变化
            window.addEventListener('resize', () => {
                myChart.resize();
            });
            
            //触发省份介绍的actions
            myChart.on('click', (params) => {
      this.$store.dispatch('selectRegion', params.name); // 触发 Vuex action
    });
        },
        // 在组件销毁前移除窗口大小变化的监听器
        beforeDestroy() {
            window.removeEventListener('resize', () => {
                this.$refs.chart.resize(); // 确保正确引用 ECharts 实例
            });
        }
    },
    // 组件销毁时销毁 ECharts 实例
    beforeDestroy() {
        if (this.$refs.chart && this.$refs.chart.dispose) {
            this.$refs.chart.dispose();
        }
    }
};
</script>

<style>
#centertop {
    width: 100%;
    height: 100%;
    position: relative;
}
</style>